<template>
	<view>

		<form>
			<view class="cu-form-group margin-top">
				<view class="title">原密码</view>
				<input :class="oldPassRight=='true'?'':'redline'" v-model="oldPass" placeholder="请输入原密码" name="input" @blur="passConfirm">
			</view>
			<view class="cu-form-group" >
				<view class="title">新密码</view>
				<input :class="passRight?'redline':''" v-model="loginpass.password" :placeholder="isLoginPass?'8-16位至少包含数字和英文大小写':'请输入6位支付密码'"  name="input">
			</view>
			<view class="cu-form-group">
				<view class="title">确认密码</view>
				<input :class="confirmP?'redline':''" v-model="confirmPass" placeholder="确认密码" name="input">
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input v-model='yanzheng' placeholder=" " name="input">
				<!-- 	<button class='cu-btn bg-green shadow'>验证码</button> -->
				<imgcode></imgcode>
			</view>
			<button class="confirmChange cu-btn block line-blue lg cuIcon-my" @tap="goChange">确认修改</button>

		</form>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users")
	import imgcode from '@/components/zhstars2013-imgcode/zhstars2013-imgcode.vue'
	export default {
		components: {
			imgcode
		},
		data() {
			return {
				isLoginPass: true, //页面类型
				oldPass:'',//原密码
				oldPassRight:"true",//原密码验证结果
				loginpass:{
					id:uni.getStorageSync('userid'),
					password:'',
				},
				confirmPass:'', //确认密码
				yanzheng:"",//验证码
			}
		},
		computed:{
			//密码框
			passRight(){
				if(this.isLoginPass){ //登录密码
					const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
					if(this.loginpass.password){
						return !reg.test(this.loginpass.password)
					}else{
						return false
					}
				}else{  //支付密码
					const reg=/^\d{6}$/
					if(this.loginpass.password){
						return !reg.test(this.loginpass.password)
					}else{
						return false
					}
				}
			},
			//确认框
			confirmP(){
					if(this.confirmPass){
						return this.confirmPass==this.loginpass.password?false:true
					}else{
						return false
					}
			},
			isRight(){
				// console.log(this.loginpass.password&&!this.passRight,1)
				// console.log(this.confirmPass&&!this.confirmP,2)
				// console.log(this.oldPassRight=='true'&&this.oldPass,3)
				if(this.loginpass.password&&!this.passRight&&this.confirmPass&&!this.confirmP&&this.oldPassRight=='true'&&this.oldPass){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			...mapActions(['verifyAassword','passwordChange','verifyPayPassword','payPasswordChange']),
			//确认原密码
			async passConfirm(){
				if(this.oldPass){
						if(this.isLoginPass){
							//登录密码
						 this.oldPassRight= await this.verifyAassword(this.oldPass)
						// console.log(this.oldPassRight,'验证密码')
						if(this.oldPassRight=="false"){
							uni.showToast({
								title:"原密码错误,请重新输入",
								duration:2000,
								icon:'none'
							})
						}
						}else{
							//支付密码请求
							this.oldPassRight= await this.verifyPayPassword(this.oldPass)
							// console.log(this.oldPassRight,'验证密码')
							if(this.oldPassRight=="false"){
								uni.showToast({
									title:"原密码错误,请重新输入",
									duration:2000,
									icon:'none'
								})
							}
						}
				}
			},
			//新密码认证
			// passgo(){
			// 	const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
			// 	console.log(reg.test(this.loginpass.password))
			// 	console.log(this.passRight,'11111')
			// },
			//点击确定密码
			goChange(){
				if(this.yanzheng==uni.getStorageSync('imgcode')){
					if(this.isRight){
						if(this.isLoginPass){
							//发登录密码请求
							this.passwordChange(this.loginpass)
						}else{
							//支付密码请求
							this.payPasswordChange({id:this.loginpass.id,payPassword:this.loginpass.password})
						}
					}else{
						uni.showToast({
							title:'请输入正确格式的新密码',
							duration:2000,
							icon:'none'
						})
					}
				}else{
					uni.showToast({
						title:'验证码错误',
						duration:2000,
						icon:'none'
					})
				}
			}
		},
		onLoad(options) {
			//判断登录或支付密码
			this.isLoginPass = options.isLoginPass ? true : false
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.confirmChange {
		width: 670rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.redline{
		border: 1px solid #ff0a0e;
	}
</style>
